<template>
    <div class="order-banner">
        <div class="banner-top">
            <div class="title">
                <span>工单详情</span>
                <span>{{ detail.jobOrderNo }}</span>
                <span class="state" v-if="store.stateOperation !== 1" :style="{ color: stateName[detail.status - 1]?.fontColor, background: stateName[detail.status - 1]?.bgColor }">
                    {{ detail.statusText }}
                </span>
            </div>
            <el-button type="primary" class="btn" @click="processClick" v-if="type === '工单详情' && store.stateOperation !== 1">流程</el-button>
        </div>
        <div class="banner-bottom" :style="[type !== '工单详情' ? 'margin-top:0' : '']">
            <div class="item" v-for="item in bannerData" :style="[type !== '工单详情' ? 'width: 50%;margin-top:28px' : 'margin-top:14px']">
                <span>{{ item.label }}</span>
                <span>{{ item.value }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useReportOrderDetail } from "@/store/reportOrderDetail.js";
import { computed } from "vue";

const store = useReportOrderDetail();
const props = defineProps({
    type: {
        type: String,
        default: "工单详情"
    },
    detail: {
        type: Object,
        default: () => ({})
    }
});
const stateName = [
    { fontColor: "#FFC53F", bgColor: "rgba(255,197,63,0.2)", index: 1 },
    { fontColor: "#8C8C8C", bgColor: "#EBEBEB", index: 2 },
    { fontColor: "#FF4D4F", bgColor: "rgba(255,77,79,0.2)", index: 3 },
    { fontColor: "#FA6400", bgColor: "rgba(250,173,20,0.2)", index: 4 },
    { fontColor: "#00428E", bgColor: "rgba(0,66,142,0.2)", index: 5 },
    { fontColor: "#A0D911", bgColor: "rgba(160,217,17,0.2)", index: 6 },
    { fontColor: "#8C8C8C", bgColor: "#EBEBEB", index: 7 }
];
const bannerData = computed(() => [
    { label: "设备对象", value: props.detail.deviceName },
    { label: "工单专业", value: props.detail.majorText },
    { label: "工单等级", value: props.detail.jobOrderLevelText },
    { label: "报修来源", value: props.detail.jobOrderSoursceText },
    { label: "报修ID", value: props.detail.repairPersonName },
    { label: "区域位置", value: props.detail.areaText },
    { label: "工单生成日期", value: props.detail.createDate },
    { label: "工单完结日期", value: props.detail.endDate }
]);

const emtis = defineEmits(["processClick"]);
const processClick = () => {
    emtis("processClick");
};
</script>

<style lang="less" scoped>
.order-banner {
    box-sizing: border-box;
    padding: 16px 16px 22px 16px;
    background: #ffffff;
    font-size: 14px;
    .banner-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            display: flex;
            align-items: center;
            span {
                &:first-child {
                    font-size: 16px;
                    font-weight: 600;
                    color: #1b3646;
                }
                &:nth-child(2) {
                    margin-left: 8px;
                    color: #595959;
                }
            }
            .state {
                margin-left: 10px;
                width: 40px;
                height: 20px;
                font-size: 12px;
                background-color: #fff4d9;
                color: #ffc53f;
                line-height: 20px;
                text-align: center;
            }
        }
        .btn {
            width: 80px;
            height: 32px;
        }
    }
    .banner-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        .item {
            width: calc(100% / 4);
            span {
                &:first-child {
                    color: #1b3646;
                }
                &:last-child {
                    margin-left: 16px;
                    color: #595959;
                }
            }
        }
    }
}
</style>
